import 'package:flutter/material.dart';

const largeScreenSize = 1366;
const mediumScreenSize = 768;
const smallScreenSize = 360;
const customScreenSize = 1100;

/// [ResponsiveWidget] a widget that will show target screen according to this
/// size of this device screen
/// * largeScreen is required
class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

  const ResponsiveWidget({
    Key? key,
    required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

  static bool isSmallScreen(BuildContext context) =>
      MediaQuery.of(context).size.width < mediumScreenSize;
  static bool isMediumScreen(BuildContext context) =>
      MediaQuery.of(context).size.width >= smallScreenSize &&
      MediaQuery.of(context).size.width < largeScreenSize;
  static bool isLargeScreen(BuildContext context) =>
      MediaQuery.of(context).size.width < smallScreenSize;

  static bool isCustomSize(BuildContext context) =>
      MediaQuery.of(context).size.width < customScreenSize &&
      MediaQuery.of(context).size.width >= mediumScreenSize;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, contraints) {
      final width = contraints.maxWidth;
      if (width >= largeScreenSize)
        return largeScreen;
      else if (width >= mediumScreenSize)
        return mediumScreen ?? largeScreen;
      else
        return smallScreen ?? largeScreen;
    });
  }
}
